import styled from '@emotion/styled';
import React, { useEffect } from 'react';
import AgentService from '@/modules/Agent';
import { IQualityTestingResult } from '@/modules/interface';
import { useTranslation } from 'react-i18next';
import dayjs from 'dayjs';

const TestingResultContainer = styled.div`
	height: ${(props: { hasHumanflow: boolean }) => (props.hasHumanflow ? '160px' : '326px')};
	width: 100%;
	background: #ffffff;
	box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.12);
	border-radius: 2px;
	margin-top: 16px;
`;

const Title = styled.div`
	font-size: 13px;
	font-weight: 500;
	color: #2d2d2d;
	padding: 12px 14px;
`;

const Context = styled.div`
	margin-left: 14px;
	overflow-y: scroll;
	max-height: ${(props: { hasHumanflow: boolean }) => (props.hasHumanflow ? '100px' : '280px')}
`;

const Time = styled.p`
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 400;
	color: #5e5e5e;
`;

const Item = styled.div`
	margin-bottom: 14px;
`;

const Result = styled.p`
	margin-bottom: 0;
	font-size: 12px;
	font-weight: 400;
	color: ${(props: { isPass?: boolean }) => (!props.isPass ? '#DE0112' : '#303030')};
`;

const index = (props: { hasHumanflow: boolean }) => {
	const { t } = useTranslation();
	const { hasHumanflow } = props;

	const { qualityTesting } = AgentService;

	const getText = (data: IQualityTestingResult) => {
		switch (data.category) {
			case '1': //人脸对比
				return `${data.name}：${data.client.customerRole ? data.client.customerRole : '- -'}<${data.client.userName}>${t('similarity')}${data.detectionValue}（${getIsPass(data.isPass)}）`;
			case '2': //活体检测
				return `${data.name}：${data.client.customerRole ? data.client.customerRole : '- -'}<${data.client.userName}>${t('check')}${getIsPass(data.isPass)}`;
			case '3': //客户敏感词
				return `${t('sensitive-words')}：${data.client.customerRole ? data.client.customerRole : '- -'}<${data.client.userName}>:${data.badword}`;
			case '4': //坐席敏感词
				return `${t('sensitive-words')}：${getRole(data.client.clientRole)}<${data.client.userName}>:${data.badword}`;
			default:
				break;
		}
	};

	const getIsPass = (isPass?: boolean) => {
		return isPass ? `${t('pass')}` : `${t('notPass')}`;
	};

	const getRole = (role: string) => {
		return role === 'customer' ? `${t('client')}` : `${t('agent')}`;
	};

	return (
		<TestingResultContainer hasHumanflow={hasHumanflow}>
			<Title>{t('qualityTestingResult')}</Title>
			<Context id="widget-quality-testing" hasHumanflow={hasHumanflow}>
				{qualityTesting.qualityTestingResult.map((item, index) => {
					return (
						<Item key={index}>
							<Time>{dayjs(item.createdAt).format('YYYY-MM-DD HH:mm:ss')}</Time>
							<Result isPass={item.isPass}>{getText(item)}</Result>
						</Item>
					);
				})}
			</Context>
		</TestingResultContainer>
	);
};

export default index;
